<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8"/>

    <title>Demo Chat</title>

    <style>
        body {
            padding: 20px;
        }

        #console {
            height: 400px;
            overflow: auto;
        }

        .username-msg {
            color: orange;
        }

        .connect-msg {
            color: green;
        }

        .disconnect-msg {
            color: red;
        }

        .user_logo {
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }

        .send-msg {
            color: #888
        }
    </style>


    <!--    <script src="../js/socket.io.min.js"></script>-->
    <!--    <script src="../js/moment.min.js"></script>-->
    <!--    <script src="../js/jquery-1.10.1.min.js"></script>-->
    <script src="../js/sockjs.min.js"></script>
    <script src="../js/stomp.min.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script>
        var stompClient = null;
        console.log('websocket开始加载配置!!');
        var host = "http://localhost:";
        var port;
        var randIndex = (Math.ceil(Math.random() * 10)) % 3;
        // 模拟随机端口号
        if (randIndex == 0) {
            port = "8889";
        } else if (randIndex == 1) {
            port = "8888";
        } else {
            port = "8890";
        }
        host = host + port;
        console.log(randIndex);

        function doConnect() {
            var socket = new SockJS(host + "/myWs?name=" + $('#name').val());
            stompClient = Stomp.over(socket);
            stompClient.connect({
                'name': $('#name').val()
            }, function (frame) {
                console.log('尝试连接websocket！');
                //注意这里的/user是一个前缀描述符
                stompClient.subscribe('/user/queue/sendUser', function (response) {
                    // console.log('this is sendUser:' + response.body);
                    $('#console').html(response.body);
                });
                //监听的路径以及回调
                stompClient.subscribe('/topic/sendTopic', function (response) {
                    // console.log('this is sendTopic' + response);
                    $('#console').html(response.body);
                });
            })
        }


        //点对点发送数据
        function sendMsg() {
            var message = $('#msg').val();
            var name = $('#name').val();
            stompClient.send("/send-to-user", {}, JSON.stringify({sessionKey: name, message: message}));
        }

        //广播数据
        function sendBroadcast() {
            var message = $('#msg').val();
            var name = $('#name').val();
            stompClient.send("/send-all-user", {}, JSON.stringify({ message: message}));
        }

    </script>
</head>

<body>

<h1>Demo Chat</h1>
<br/>

<div id="console" class="well">
</div>

<form class="well form-inline" οnsubmit="return false;">
    <input id="msg" class="input-xlarge" type="text" placeholder="msg"/>
    <input id="name" class="input-xlarge" type="text" placeholder="name"/>
    <button type="button" onClick="doConnect()" class="btn" id="send">doConnect</button>
    <button type="button" onClick="sendMsg()" class="btn">sendMsg</button>
    <button type="button" onClick="sendBroadcast()" class="btn">sendMsg</button>
</form>


</body>

</html>